<script>

  var t;
  function filter(servlet, hair_color, div) {
    var request = new XMLHttpRequest();
    var url = servlet + '?hair_color=' + hair_color;
    request.open("GET", url, true);
    
    div.innerHTML = 'Finding average score...';
    request.t = setTimeout(function() { showClock(div, 0, request)},10)
    request.onreadystatechange = function() {
      if (this.readyState == 4) {
        if (this.status != 200) {
          clearTimeout(request.t);
          div.innerHTML = 'Server Error';
        } else {
          clearTimeout(request.t);
          var response = eval('(' + request.responseText + ')');
          div.innerHTML = ''; // clear div
          speed = document.createElement('div')
          speed.innerHTML = 'Took ' + response[0] + ' seconds'
          count = document.createElement('div')
          count.innerHTML = 'Found ' + response[1] + ' matches'
          score = document.createElement('div')
          score.innerHTML = 'Average score: ' + response[2]
          div.appendChild(speed);
          div.appendChild(count);
          div.appendChild(score);
        }
      }
    }
    request.send();
  }
  
  function showClock(div, time, request) {
    div.innerHTML = '<div>Finding average score...</div><div>' + (time / 1000.0) + '</div>';
    request.t = setTimeout(function() { showClock(div, time + 10, request)}, 10)
  }
  
  function doBothFilters() {
    filter('/filterBlobstore', 
        document.getElementById('hair_color').value, document.getElementById('blobstore_results'))
    filter('/filterDatastore', 
        document.getElementById('hair_color').value, document.getElementById('datastore_results'))
  }
</script>

<style>
  .result-box {
    height: 300px; 
    width: 300px;
    border: 1px solid black;
    display: inline-block;
    padding: 0 20px;
    margin: 20px;
    vertical-align: top;
    font-size: 20px;
  }
</style>

<div style='font-size: 20px; width:600px; margin: 0px auto;'>
  Filter by hair color: 
  <input id='hair_color' style='font-size:20px;' 
      onkeypress='if (event.keyCode == 13) { doBothFilters() }'>
  <button onclick="doBothFilters()" style='font-size:20px'>Average Scores!</button>
</div>

<div class='result-box'>
  <h1>Datastore</h1>
  <div id='datastore_results'>
  </div>
</div>

<div class='result-box'>
  <h1>Blobstore</h1>
  <div id='blobstore_results'>
  </div>
</div>
